<template>
  <div class="websiteOptimization-difficul">
   <!-- <p class="websiteOptimization-difficul-title">
      <span class="center">
        <span class="title-h1">优化</span>
        <span class="title-h2">难题</span>
        <span class="title-icon ml-4"></span>
      </span>
    </p>
    <p class="title-en">
      <span class="center">obstacle on optimizing</span>
    </p> -->
	<div class="flex" style="justify-content: center;align-items: center;">
		<img
		  src="@/assets/image/websiteOptimization/img／tab05／title／obstacle@2x.png"
		  alt=""
				style="width: 227px;height:88px;object-fit: cover;"
		/>
	</div>

    <p class="disc mt-40" style="text-align: center">
      在进行网站优化时，企业常常面临诸多挑战和难点。这些难点不仅涉及技术层面的复杂性，还包括了用户行为分析、搜索引擎算法变化、多渠道整合等多方面的问题。
    </p>
    <ul class="websiteOptimization-list mt-40">
      <li v-for="item in list">
        <img class="order-img" :src="item.img" alt="" />
        <h3 class="item-title mt-12">{{ item.title }}</h3>
        <p class="item-en mt-4">{{ item.enTitle }}</p>
        <p class="item-disc mt-8">{{ item.disc }}</p>
      </li>
    </ul>
    <div class="end-img">
      <img src="@/assets/image/situation.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import img1 from "@/assets/image/websiteOptimization/tab05／obstacleCard／letterA@2x.png";
import img2 from "@/assets/image/websiteOptimization/tab05／obstacleCard／letterB@2x.png";
import img3 from "@/assets/image/websiteOptimization/tab05／obstacleCard／letterC@2x.png";
import img4 from "@/assets/image/websiteOptimization/tab05／obstacleCard／letterD@2x.png";

const list = [
  {
    img: img1,
    title: "提高效率",
    enTitle: "Improve efficiency",
    disc: "网站内数据量大且复杂，有效收集、整理和分析这些数据需要耗费大量时间和资源。搜索引擎算法的不断变化要求优化策略必须灵活调整，以适应新的排名规则，这无疑增加了优化工作的复杂性和不确定性。",
  },
  {
    img: img2,
    title: "资源整合",
    enTitle: "Resource Integration",
    disc: "网站优化涉及的内容广泛，需要整合的资源种类繁多，包括但不限于搜索引擎优化(SEO)策略、优质外链资源、内容营销资源、社交媒体推广渠道等。有效收集和筛选这些资源需要专业的知识和丰富的经验。",
  },
  {
    img: img3,
    title: "持续保障",
    enTitle: "Continuous protection",
    disc: "网站优化的难点还在于如何确保优化效果的持久性和稳定性,包括不断更新搜索引擎算法和及时调整优化策略以应对变化；同时，保持对网站内容、结构、用户体验等方面的持续优化，确保网站在持续竞争中保持领先地位。",
  },
  {
    img: img4,
    title: "实时监测",
    enTitle: "Real-time monitoring",
    disc: "实时监测需要系统能够快速响应并处理大量数据，任何延迟都可能导致优化策略的不及时或失误。在高并发或复杂场景下，确保监测系统的稳定性和准确性是一个技术难题。",
  },
];
</script>

<style lang="scss" scoped>
.websiteOptimization-difficul {
  width: 1000px;
  margin: 0 auto;
  margin-top: 80px;
  .websiteOptimization-difficul-title {
    text-align: center;
    .center {
      display: inline-block;
      width: 257px;
      text-align: left;
    }
    .title-h1 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 48px;
      color: #1a1a1a;
    }
    .title-h2 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 32px;
      color: #1a1a1a;
    }
    .title-icon {
      display: inline-block;
      width: 16px;
      height: 4px;
      background: #e62e3d;
      border-radius: 0px 0px 0px 0px;
    }
  }
  .title-en {
    .center {
      display: inline-block;
      width: 257px;
      text-align: left;
    }
    text-align: center;
    font-family: Poiret One;
    font-weight: 400;
    font-size: 24px;
    color: #1a1a1a;
  }
  .disc {
    width: 100%;
    font-family: Alibaba PuHuiTi-Regular;
    font-weight: 400;
    font-size: 20px;
    color: #808080;
    letter-spacing: 0.5px;
  }
  .websiteOptimization-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 8px;
    > li {
      width: 220px;
      // height: 100%;
    }
    .order-img {
      width: 64px;
      height: 64px;
    }
    .item-title {
      font-family: Alibaba PuHuiTi-Bold;
      font-weight: bold;
      font-size: 32px;
      color: #1a1a1a;
    }
    .item-en {
      font-family: Poiret One, Poiret One;
      font-weight: 400;
      font-size: 20px;
      color: #1a1a1a;
    }
    .item-disc {
      // width: 120px;
      font-weight: 400;
      font-size: 16px;
      height: 300px;
      color: #808080;
      line-height: 28px;
      text-align: left;
      font-family: Alibaba PuHuiTi-Regular;
      word-wrap: break-word;
    }
  }
  .end-img {
    width: 100%;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
